<template>
  <el-row style="margin:50px 10px 10px 10px height:80%">
    <el-col :span="24">
      <div>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col v-for="(item,index) in navs" :key="index" class="box1 grid-content bg-purple" :span="2">
            <a target="blank" :href="item.url">
              <img :src="item.imgPath" alt="">
            </a>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    // dialogAdd: Boolean,
    navs: {
      type: Array,
      required: true
    }
  }
}

</script>
<style scoped>

.box1 {
  transition: 0.1s;
  height: 80%;
  -moz-transition: 0.1s;
  -webkit-transition: 0.1s;
}

.box1:hover {
  /*-webkit-transform: rotate(0deg) !important;*/
  transform: scale(111) !important;
  -webkit-transform: scale(1.1) !important;
  /*box-shadow: 411px 4px 110px #ccc !important;*/
  /*-moz-box-shadow: 411px 4px 10px #ccc !important;*/
  -webkit-box-shadow: 1px 1px 510px #2229f2 !important;
  z-index: 1 !important;

}

.el-row {
  margin: 0.5%;
  &:last-child {
    margin: 10;
  }
}

.el-col {
  height: 80%;
  border-radius: 4px;
}

.bg-purple {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 20px;
  width: 100px;
  height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding:10px;
   box-sizing: border-box;
   overflow: hidden;
}
.grid-content a,.grid-content img {
  width: 100%;
  height: 100%;

}

.row-bg {
  padding: 10px 0;
  /*background-color: #f9fafc;*/
}

</style>
